<template>
  <div>
  <el-upload
    class="upload-demo"
    :action="action"
        :data="data"
        :on-error="imgError"
        :on-success="imgSuccess"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
  </div>
</template>

<script>
  export default {
          data() {
            return {
              data: { key: "" },//key实际开发中请从后端获取
              fileList: [],
              action: "/api/ceshi/index/upload.php",
            };
          },

          methods: {
            //上传失败
            imgError(err, file, fileList) {
              this.$message.error(err);
            },
            imgSuccess(response, file, fileList) {
              if (response.status == 200) {
                this.$message({
                  message: response.message,
                  type: "success"
                });
                //response.data为返回的图片文件名，可将其写入数据库
                //this.imgurl = response.data;
              } else {
                this.$message.error(response.message);
                this.fileList = [];
              }
            },

            handleExceed(files, fileList) {
              this.$message.error("上传数量超过限制");
            },
            beforeRemove(file, fileList) {
              return this.$message({
                message: "删除成功",
                type: "success"
              });
            },
          }
        };
</script>

<style>
</style>
